<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>书籍借阅</title>
    <!-- 引入Bootstrap框架的CSS样式 -->
    <link rel="stylesheet" type="text/css" href="/css/bootstrap.css" />
    <!-- 引入Bootstrap响应式设计的CSS -->
    <link rel="stylesheet" type="text/css" href="/css/bootstrap-responsive.css" />
    <!-- 自定义样式表 -->
    <link rel="stylesheet" type="text/css" href="/css/style.css" />
    <!-- 引入jQuery库 -->
    <script type="text/javascript" src="/js/jquery.js"></script>
    <!-- 引入Bootstrap框架的JavaScript文件 -->
    <script type="text/javascript" src="/js/bootstrap.js"></script>
    <!-- 其他自定义JavaScript插件 -->
    <script type="text/javascript" src="/js/ckform.js"></script>
    <script type="text/javascript" src="/js/common.js"></script>

    <style type="text/css">
        /* 设置页面主体内容区域的底部内边距 */
        body {
            padding-bottom: 40px;
        }
        /* 侧边栏导航的内边距设置 */
        .sidebar-nav {
            padding: 9px 0;
        }
        /* 当屏幕宽度小于等于980px时的响应式样式调整 */
        @media (max-width: 980px) {
            /* 调整导航文本按钮在小屏幕下的浮动与内边距 */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
    </style>

</head>
<body>
<!-- 创建一个带有边框、 hover效果、固定宽度和外边距的表格用于展示书籍借阅信息 -->
<table class="table table-bordered table-hover definewidth m10">
    <thead>
    <tr>
        <th>书籍名称</th>
        <th>书籍类别</th>
        <th>作者</th>
        <th>出版社</th>
        <th>版本</th>
        <th>申请时间</th>
        <th>借书状态</th>
    </tr>
    </thead>
    <!-- 使用Thymeleaf模板引擎动态生成表格行，每一行对应一个借阅记录 -->
    <tr th:each="borrow:${list}">
        <td th:text="${borrow.bookName}"></td>
        <td th:text="${borrow.sortName}"></td>
        <td th:text="${borrow.author}"></td>
        <td th:text="${borrow.publish}"></td>
        <td th:text="${borrow.edition}"></td>
        <td th:text="${borrow.startTime}"></td>
        <!-- 根据借书状态动态显示不同的按钮，状态用按钮颜色和文字表示 -->
        <td>
            <button type="button" th:if="${borrow.status == 0}" class="btn btn-default disabled" disabled>待确认</button>
            <button type="button" th:if="${borrow.status == 1}" class="btn btn-default disabled" disabled>审批通过</button>
            <button type="button" th:if="${borrow.status == 2}" class="btn btn-default disabled" disabled>审批未通过</button>
            <button type="button" th:if="${borrow.status == 3}" class="btn btn-default disabled" disabled>归还待审批</button>
        </td>
    </tr>
</table>

</body>
</html>